<template>
	<div class="food">
		<nav class="header">
			<div id="head1">
				<div id="dingwei">
					<span class="glyphicon glyphicon-map-marker"></span>
					<div style="overflow: hidden;text-overflow: ellipsis;width: 85%;">
						<span>{{place.name}}</span>
					</div>
					<span class="glyphicon glyphicon-triangle-bottom" id="dsj"></span>
				</div>
				<div id="weather">
					<section id="word">
						<span>{{weather.temperature}}<sup>○</sup></span><br />
						<span>{{weather.description}}</span>
					</section>
					<section id="pic">
						<img :src="weather.image_hash | picurl" />
					</section>
				</div>
			</div>
			<input type="text" placeholder="搜索商家、商品" aria-lable="搜索商家、商品" id="search" />
			<div id="feilei">
				<a href="" v-for="hotshopping1 in hotshopping1">{{hotshopping1.search_word}}</a>
			</div>
		</nav>

		<!--轮播-->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<a href="" v-for="hotshopping2 in hotshopping2.slice(0,8)">
						<img :src="hotshopping2.image_hash | picurl" />
						<span>{{hotshopping2.name}}</span>
					</a>
				</div>
				<div class="item">
					<a href="" v-for="hotshopping2 in hotshopping2.slice(8)">
						<img :src="hotshopping2.image_hash | picurl" />
						<span>{{hotshopping2.name}}</span>
					</a>
				</div>
			</div>
		</div>

		<!--推荐商家-->
		<div class="tjsjbig">
			<h3>推荐商家</h3>
			<div v-for="restaurant in restaurants">
				
					<div class="tjsj" >
						<router-link :to="{name:'shop',params:{id:restaurant.id}}" style="text-decoration: none;">
						<div class="tjleft">
							<img :src="restaurant.image_path | picurl" />
						</div>
						</router-link>
						<div class="tjright">
							<router-link :to="{name:'shop',params:{id:restaurant.id}}" style="text-decoration: none;">
							<section class="right-title">
								<span v-if="restaurant.is_premium==true">
							<span class="pinpai">品牌</span>
								</span>
								<span class="shopname">{{restaurant.name}}</span>
								<span style="float: right;">
							<span v-if="restaurant.supports.length>0">
								<i class="bao">保</i>
							</span>
								<span v-if="restaurant.supports.length>1">
								<i class="piao">票</i>
							</span>

								</span>

							</section>
							<section class="right-middle">
								<div class="star">
									<span v-for="n in 5">
								<span class="glyphicon glyphicon-star"></span>
									</span>
									<div class="star1">
										<span class="starcolor" :style="{width:restaurant.rating*0.32+'rem'}"></span>
									</div>
								</div>
								<span class="rating">{{restaurant.rating}}</span>
								<span class="xl">月售{{restaurant.recent_order_num}}单</span>
								<div v-if="restaurant.delivery_mode">
									<span class="fnzs">蜂鸟专送</span>
								</div>

							</section>
							<section class="right-bottom">
								<span class="qs">￥{{restaurant.float_minimum_order_amount}}起送</span>
								<span class="hx">/</span>
								<span class="psf">{{restaurant.piecewise_agent_fee.description}}</span>
								<div class="lucheng">
									<span class="jl">{{restaurant.distance | juli}}km</span>
									<span class="hx">/</span>
									<span class="sj">{{restaurant.order_lead_time}}分钟</span>
								</div>
							</section>
							</router-link>
							<section class="yh yhheight">
								<div class="xyh">
									<router-link :to="{name:'shop',params:{id:restaurant.id}}" style="text-decoration: none;color: #939393;">
									<i class="xin">{{restaurant.activities[0].icon_name}}</i>
									<span class="xyhms">{{restaurant.activities[0].description}}</span>
									</router-link>
									<div v-if="restaurant.activities.length>1">
										<div v-if="restaurant.activities[1].description.split('，').length+1>2">
											<div class="hd">{{restaurant.activities[1].description.split('，').length+1}}个活动
												<span class="glyphicon glyphicon-triangle-bottom" @click="xlt"></span>
											</div>
										</div>
									</div>

								</div>
								<router-link :to="{name:'shop',params:{id:restaurant.id}}" style="text-decoration: none;">
								<div v-if="restaurant.activities.length>1">
									<div v-for="favourable in restaurant.activities[1].description.split('，')">
										<div class="mj">
											<i class="jian">{{restaurant.activities[1].icon_name}}</i>
											<span class="mjxq">{{favourable}}</span>
										</div>
									</div>

								</div>
								</router-link>
							</section>
						</div>

					</div>
				
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		name: 'food',
		data() {
			return {
				msg: '这是外卖',
				place: {},
				weather: {},
				hotshopping1: [],
				hotshopping2: [],
				restaurants: [],
				//每页显示几个
				pageSize: 20,
				//第几页
				page: 1,
				isscrop: true
			}
		},
		filters: {
			picurl: function(text) {
				return '//fuss10.elemecdn.com/' + text.slice(0, 1) + '/' + text.slice(1, 3) + '/' + text.slice(3, 32) + text.slice(32) + '.' + text.slice(32) + '?imageMogr/thumbnail/!69x69r/gravity/Center/crop/69x69'
			},
			juli: function(lang) {
				lang = lang / 1000
				return lang.toFixed(2)
			}
		},
		methods: {
			getlocal() {
				var url = '/elm/bgs/poi/reverse_geo_coding?latitude=26.150047&longitude=119.131724'
				this.$http.get(url).then((res) => {
					//console.log(res.body)
					this.place = res.body
				})
			},
			getweather() {
				var url = '/elm/bgs/weather/current?latitude=26.150047&longitude=119.131724'
				this.$http.get(url).then((res) => {
					//console.log(res.body)
					this.weather = res.body
				})
			},
			gethotshopping1() {
				var url = '/elm/shopping/v3/hot_search_words?latitude=26.150047&longitude=119.131724'
				this.$http.get(url).then((res) => {
					//console.log(res.body)
					this.hotshopping1 = res.body

				})
			},
			gethotshopping2() {
				var url = '/elm/shopping/v2/entries?latitude=26.150047&longitude=119.131724&templates[]=main_template'
				this.$http.get(url).then((res) => {
					console.log(res.body[0].entries)
					this.hotshopping2 = res.body[0].entries
				})
			},
			xlt() {
				var xlts = document.getElementsByClassName('glyphicon-triangle-bottom')
				var slts = document.getElementsByClassName('glyphicon-triangle-top')
				$(xlts).click(function() {
					$(this).attr('class', 'glyphicon glyphicon-triangle-top')
					$(this).parent().parent().parent().parent().parent().removeClass('yhheight')
					$(this).parent().parent().parent().css('overflow', 'inherit')
				})
				$(slts).click(function() {
					$(this).attr('class', 'glyphicon glyphicon-triangle-bottom')
					$(this).parent().parent().parent().parent().parent().addClass('yhheight')
					$(this).parent().parent().parent().css('overflow', 'hidden')
				})
			},
			getrestaurants() {
				var url = '/elm/shopping/restaurants?extras[]=activities&terminal=h5'
				this.$http.get(url, {
					params: {
						latitude: 26.150047,
						longitude: 119.131724,
						//offset  偏移量 跳过几个
						//limit	 需要多少个
						offset: 0,
						limit: this.pageSize * this.page,
					}
				}).then((res) => {
					console.log(res.body)
					//					this.restaurants = res.body

					res.body.forEach(function(element) {
						this.restaurants.push(element)
					}, this);

					this.isscrop = true
				})
			},
			scrollload() {
				//				console.log($(document).scrollTop())
				//				console.log($('.tjsj').eq(($('.tjsj').length - 1)).offset().top - $(window).height())
				if($(document).scrollTop() + $(window).height() > $('.tjsj').eq(($('.tjsj').length - 1)).offset().top) {
					if(this.isscrop == true) {
						this.isscrop = false
						console.log(this.page++)
						this.getrestaurants()
					} else {
						return false
					}
				}
			}
		},
		created() {
			this.getlocal()
			this.getweather()
			this.gethotshopping1()
			this.gethotshopping2()
			this.getrestaurants()
			$('.carousel').carousel({
				interval: false
			})

			$(document).on('scroll', this.scrollload);
			$(window).on('resize', this.scrollload);
		},
		mounted() {

		}
	}
</script>

<!--scoped ��ʽֵʹ�õ�ǰ���-->
<style scoped>
	.food {
		background-color: gainsboro;
	}
	
	.header {
		padding: .266667rem .373333rem;
		width: 100%;
		height: 3.253333rem;
		background-image: linear-gradient(90deg, #0af, #0085ff);
		color: #fff;
		box-sizing: border-box;
	}
	
	.header #head1 {
		width: 100%;
		height: 0.92rem;
		display: flex;
		justify-content: space-between;
	}
	
	.header #head1 #dingwei {
		width: 60%;
		/*background-color: yellow;*/
		display: flex;
		justify-content: space-around;
		/*margin: 0 .133333rem;*/
		font-size: .48rem;
		max-width: 80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: .533333rem;
		line-height: .533333rem;
		margin: auto 0;
		position: relative;
	}
	
	.header #head1 #dingwei #dsj {
		display: block;
		position: absolute;
		right: .133333rem;
		top: .133333rem;
		width: .186667rem;
		height: .093333rem;
		font-size: .32rem;
	}
	
	.header #head1 #weather {
		width: 1.493333rem;
		height: .746667rem;
		margin: auto 0;
		display: flex;
	}
	
	.header #head1 #weather #word {
		width: .64rem;
		height: .746667rem;
		line-height: 1.2;
	}
	
	.header #head1 #weather #word span:last-child {
		text-align: right;
		display: inline-block;
		width: 100%;
	}
	
	.header #head1 #weather #pic {
		/*background-color: red;*/
		margin-left: .106667rem;
		width: .733333rem;
		height: .733333rem;
	}
	
	.header #head1 #weather #pic img {
		width: 100%;
		height: 100%;
	}
	
	.header #search {
		display: block;
		margin: .2rem 0;
		width: 100%;
		height: .96rem;
		text-align: center;
		border-radius: .96rem;
		box-shadow: 0 .026667rem .066667rem 0 rgba(0, 0, 0, .2);
		color: #333;
		font-size: .346667rem;
		outline: none;
		border: none;
	}
	
	.header #feilei {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		/*background-color: red;*/
		/*overflow-x: ;*/
	}
	
	.header #feilei a {
		margin-right: .4rem;
		color: #fff;
		text-decoration: none;
	}
	
	#carousel-example-generic {
		width: 100%;
		height: 4.72rem;
		background-color: white;
	}
	
	#carousel-example-generic .item {}
	
	#carousel-example-generic .item a {
		width: 25%;
		display: block;
		position: relative;
		height: 1.706667rem;
		/*background-color: yellow;*/
		text-align: center;
		color: #333;
		margin-top: .293333rem;
		text-decoration: none;
		float: left;
	}
	
	#carousel-example-generic .item a img {
		width: 1.2rem;
		height: 1.2rem;
		margin: 0 auto;
	}
	
	#carousel-example-generic .item a span {
		color: #333;
	}
	
	#carousel-example-generic .carousel-indicators li {
		background-color: gainsboro;
	}
	
	#carousel-example-generic .carousel-indicators .active {
		background-color: gray;
		font-size: 12px;
		width: 10px;
		height: 10px;
		margin: 1px;
	}
	
	.tjsjbig {
		margin-bottom: 1.333333rem;
	}
	
	h3 {
		margin-top: .266667rem;
		line-height: .906667rem;
		font-weight: 600;
		border-top: 1px solid #eee;
		font-size: .4rem;
		padding-left: .4rem;
		border-bottom: 1px solid #eee;
		background-color: #fff;
	}
	
	.tjsj {
		width: 100%;
		background-color: white;
		display: flex;
		border-bottom: 1px solid #eee;
		color: #666;
		font-size: .293333rem;
	}
	
	.tjsj .tjleft {
		width: 2.133333rem;
		/*height: 3.706667rem;*/
		padding: .4rem .266667rem;
	}
	
	.tjsj .tjleft img {
		display: block;
		width: 1.6rem;
		height: 1.6rem;
		border-radius: .053333rem;
	}
	
	.tjsj .tjright {
		/*width: 7.866667rem;*/
		width: 100%;
		/*height: 3.706667rem;*/
		/*background-color: lightblue;*/
		padding: .4rem .266667rem .4rem 0;
	}
	
	.tjsj .tjright .right-title {
		width: 100%;
		/*height: .426667rem;*/
		/*background-color: red;*/
		line-height: 1.2;
	}
	
	.tjsj .tjright .right-title .pinpai {
		margin-right: .026667rem;
		padding: 0 .066667rem;
		height: .4rem;
		border-radius: .053333rem;
		background-color: #ffd930;
		color: #52250a;
		/*content: "\54C1\724C";*/
		vertical-align: top;
		text-align: center;
		white-space: nowrap;
		font-weight: 700;
		font-size: .293333rem;
		line-height: .5rem;
		box-sizing: inherit;
	}
	
	.tjsj .tjright .right-title .shopname {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333;
		font-weight: 700;
		font-size: .4rem;
		box-sizing: border-box;
		display: inline-block;
		max-width: 4rem;
	}
	
	.tjsj .tjright .right-title .bao {
		color: rgb(153, 153, 153);
		border-color: rgb(221, 221, 221);
		font-size: .266667rem;
		font-style: normal;
		line-height: 1;
		height: .293333rem;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		border: 1px solid;
		border-radius: .04rem;
		/*float: right;*/
		/*margin: auto 0;*/
		margin-right: -.026667rem;
		margin-left: .066667rem;
		width: .32rem;
		height: .293333rem;
		margin-top: .133333rem;
	}
	
	.tjsj .tjright .right-title .piao {
		color: rgb(153, 153, 153);
		border-color: rgb(221, 221, 221);
		margin-right: 0;
		/*margin-left: .066667rem;*/
		font-size: .266667rem;
		font-style: normal;
		line-height: 1;
		height: .293333rem;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		border: 1px solid;
		border-radius: .04rem;
	}
	
	.tjsj .tjright .right-middle {
		width: 100%;
		margin-top: .2rem;
		height: .4rem;
		/*background-color: yellow;*/
		display: flex;
		position: relative;
	}
	
	.tjsj .tjright .right-middle .star {
		width: 1.6rem;
		height: .266667rem;
		line-height: 1.2;
		/*background-color: green;*/
		display: flex;
		justify-content: space-between;
	}
	
	.tjsj .tjright .right-middle .star .glyphicon-star {
		font-size: .266667rem;
		color: gainsboro;
	}
	
	.tjsj .tjright .right-middle .star .star1 {
		width: 1.6rem;
		height: .266667rem;
		/*background-color: green;*/
		/*display: flex;*/
		justify-content: space-between;
		position: absolute;
		top: .035667rem;
	}
	
	.tjsj .tjright .right-middle .star .star1 .starcolor {
		display: block;
		/*width: 1.6rem;*/
		height: .266667rem;
		background-image: url(../../static/star1.png);
		background-size: .32rem .32rem;
		background-repeat-x: repeat;
	}
	
	.tjsj .tjright .right-middle .rating {
		margin: 0 .106667rem;
		color: #ff6000;
		font-size: .293333rem;
		line-height: 1.2;
	}
	
	.tjsj .tjright .right-middle .xl {
		color: #666;
		list-style: none;
		font-size: .293333rem;
		line-height: 1.2;
	}
	
	.tjsj .tjright .right-middle .fnzs {
		display: block;
		color: #fff;
		font-size: .266667rem;
		line-height: .346667rem;
		background-color: #2395ff;
		position: absolute;
		right: 0;
		/*width: 1.066667rem;*/
		height: .373333rem;
		padding: .026667rem .08rem;
	}
	
	.tjsj .tjright .right-bottom {
		margin-top: .226667rem;
		line-height: .32rem;
		/*background-color: lightcoral;*/
		display: flex;
		position: relative;
	}
	
	.tjsj .tjright .right-bottom .qs {
		color: #666;
		list-style: none;
		font-size: .293333rem;
	}
	
	.tjsj .tjright .right-bottom .hx {
		color: gainsboro;
	}
	
	.tjsj .tjright .right-bottom .psf {
		overflow: hidden;
		max-width: 2.666667rem;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #666;
		list-style: none;
		font-size: .293333rem;
	}
	
	.tjsj .tjright .right-bottom .lucheng {
		position: absolute;
		right: 0;
	}
	
	.tjsj .tjright .right-bottom .lucheng .jl {
		color: #999;
		line-height: .32rem;
		font-size: .293333rem;
	}
	
	.tjsj .tjright .right-bottom .lucheng .hx {
		color: gainsboro;
	}
	
	.tjsj .tjright .right-bottom .lucheng .sj {
		color: #2395ff;
		line-height: .32rem;
		font-size: .293333rem;
	}
	
	.tjsj .tjright .yh {
		width: 100%;
		flex-grow: 1;
		padding-top: .133333rem;
		box-sizing: inherit;
		/*background-color: lightblue;*/
		color: #939393;
		list-style: none;
		font-size: .293333rem;
		line-height: 1.2;
		border-top: 1px solid #eee;
		margin-top: .266667rem;
		overflow: hidden;
	}
	
	.tjsj .tjright .yhheight {
		height: 1.12rem;
	}
	
	.tjsj .tjright .yh .xyh {
		width: 100%;
		padding-right: 1.866667rem;
		margin-top: .066667rem;
		line-height: .426667rem;
		font-size: .266667rem;
		color: #939393;
		height: .426667rem;
		/*background-color: green;*/
		display: flex;
		position: relative;
	}
	
	.tjsj .tjright .yh .xyh .xin {
		background-color: rgb(112, 188, 70);
		color: rgb(255, 255, 255);
		border-color: rgb(112, 188, 70);
		margin-top: .066667rem;
		margin-right: .133333rem;
		font-size: .266667rem;
		font-style: normal;
		line-height: 1;
		height: .346667rem;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		border: 1px solid;
		border-radius: .04rem;
	}
	
	.tjsj .tjright .yh .xyh .xyhms {
		line-height: .426667rem;
		font-size: .266667rem;
	}
	
	.tjsj .tjright .yh .xyh .hd {
		position: absolute;
		right: 0;
		color: #999;
		text-align: right;
		font-size: .266667rem;
	}
	
	.tjsj .tjright .yh .xyh .hd span {
		font-size: .213333rem;
		margin-left: .133333rem;
	}
	
	.tjsj .tjright .yh .mj {
		margin-top: .066667rem;
		line-height: .426667rem;
		font-size: .266667rem;
		color: #939393;
		height: .426667rem;
		width: 100%;
		/*background-color: yellow;*/
	}
	
	.tjsj .tjright .yh .mj .jian {
		background-color: rgb(240, 115, 115);
		color: rgb(255, 255, 255);
		border-color: rgb(240, 115, 115);
		margin-right: .053333rem;
		font-size: .266667rem;
		font-style: normal;
		line-height: 1;
		height: .346667rem;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		border: 1px solid;
		border-radius: .04rem;
	}
	
	.tjsj .tjright .yh .mj .mjxq {
		line-height: .426667rem;
		font-size: .266667rem;
		box-sizing: inherit;
	}
</style>